<template>
  <h2>我的关注</h2>
  <div class="container">
    <div class="d-flex mb-1 me-0 ms-0 mt-3"  v-for="(item,k) in page.list" :key="k" @click="seeInfo(item.uuid)">
      <div class="flex-shrink-0">
        <img :src="request.face(item.face)" alt="..." width="170" height="100"/>
      </div>
      <div class="flex-grow-1 ms-3">
        <h5 class="mt-0 mb-1 ">{{ item.name }}</h5>
        <p class="position-relative">{{ item.info }}<button class="position-absolute btn btn-outline-dark end-0" @click.stop="request.get('user/cancelSub/'+item.uuid).then(re=>{if (re)page.list.splice(k,1)})">取消关注</button>
        </p>
      </div>
    </div>
    <div aria-label="Page navigation example">
      <ul class="pagination justify-content-end" >
        <li class="page-item">
          <a class="page-link">共{{page.pages}}页</a>
        </li>
        <li :class="'page-item'+(page.isFirstPage?' disabled':null)"><a class="page-link" @click="query.page--">上一页</a></li>
        <li v-for="i in page.navigatepageNums"
            :key="i" :class="'page-item'+(page.pageNum==i?' active':null)">
          <a class="page-link" @click="query.page=i">{{ i }}</a>
        </li>
        <li :class="'page-item'+(page.isLastPage?' disabled':null)"><a class="page-link" @click="query.page++">下一页</a></li>
      </ul>
    </div>
  </div>

</template>

<script setup lang="ts">

import request from "@/hooks/request";
import {inject, reactive, ref, Ref, watch} from "vue";
import {pageInfo, PageInfo, UserData, VideoData} from "@/types/AllData";
const seeInfo=inject('seeInfo')

const uuid = inject<Ref<number>>('uuid')
// const userList=ref<UserData[]>([])
const query=reactive({
  page:1,
  num:15
})
const page=ref<PageInfo<UserData>>(pageInfo)
request.get('user/getSubs/',query).then(re=>{
      page.value=re
})
watch(query,()=> {
  request.get('user/getSubs/', query).then(re => {
    page.value = re
  })
})
</script>

<style scoped>
</style>